<!--
 * @Author: Boyin
 * @Date: 2024-11-27 
 * @LastEditors: Boyin
 * @LastEditTime: 2024-11-27 
 * @Description: 
-->
<template>
    <div>
      <div>
        <!-- 查询日志2 -->
        <!-- <span :class="mydtcss">改变</span> -->
        <div class="mains">
          <!-- 输入实现 -->
          <a-form-model ref="subdataForm" :model="ruleForm" :rules="rules" v-bind="layout">
            <a-row>
              <a-col>
                <!-- 输入框 -->
                <a-form-model-item label="输入（区块ID）关键字查询：" prop="inquerydata" has-feedback>
                  <!-- 注  v-model绑定rule的规则 -->
                  <a-input placeholder="query for?" type="text" v-model="ruleForm.inquerydata" allow-clear
                    @keyup.enter="submitForm('subdataForm')" />
                </a-form-model-item>
              </a-col>
            </a-row>
  
            <!-- 提交按钮 -->
            <a-form-model-item class="querybutton">
              <a-button type="primary" @click="submitForm('subdataForm')">
                查询
              </a-button>
            </a-form-model-item>
          </a-form-model>
          <!-- <p class="clearfloat"></p> -->
        </div>
        <a-divider style="color:#d0d0d0">查询结果</a-divider>
        <!-- 查询结果 -->
        <!-- 查询前、成功、进行时、失败出现对应的div -->
        <!-- 查询之前/查询失败 -->
        <!-- <a-result v-show="!isresult&!isspin" title="请查询日志信息" style="height:200px;margin:50px 0">
            <template #icon>
                <a-icon type="smile" theme="twoTone" />
                </template>
        </a-result> -->
        <!-- 查询中 -->
        <div class="spin-large" v-show="!isresult&isspin">
          <a-spin size="large" />
        </div>
        <!-- 查询成功 -->
        <div class="res-peripheral" style="height:450px" v-show="isresult&!isspin">
          <div class="res-endogenous" style="padding:50px 0;">
            <div style="position:absolute;margin:0 0 40px 0">
              <h1
                style="textAlign:center;font-size:24px;font-family:PingFang-SC-Heavy,PingFang-SC;font-weight: 800;color:#3f5ecf;line-height:26px">
                查询结果</h1>
            </div>
            <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">日志名称：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.name}}</span>
            </div>
            <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">日志信息：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.message}}</span>
            </div>
            <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">存证时间：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.time}}</span>
            </div>
            <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">哈希值：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.hash}}</span>
            </div>
            <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">IP：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.ip}}</span>
            </div>
            <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">是否被篡改：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.is_changed}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 详情展示界面 -->
      <a-drawer title="详情展示" destroyOnClose width="500px" placement="left" :visible="isDrawerShow"
        @close="isDrawerShow=false">
        <a-list item-layout="horizontal" :data-source="currDrawerShowform">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta :description="item.value">
              <a slot="title" href="">{{item.title}}</a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-drawer>
      <!-- 表格 -->
      <a-table :columns="columns" rowKey="hash" :dataSource="datalt" :customHeaderRow="customHeaderRow"
        :customRow="customRow" bordered>
        <template slot="opration" slot-scope="text,record">
          <a-button type="link" size="small" href="javascript:;" @click="getDetial(record,text)" style="color:red">详情
          </a-button>
        </template>
        <template slot="verification" slot-scope="text,record">
          <a-button type="link" size="small" href="javascript:;" @click="verify(record,text)" style="color:red">验证
          </a-button>
        </template>
      </a-table>
    </div>
  </template>
  <script>
    import axios from 'axios'
    import { parseTime } from '@/utils/date.js';
    import { getCertificateNumber } from '@/utils/getcertificatenumber.js'
  
  
    const columns = [
      {
        title: '区块ID',
        sorter: false,
        sortField: 'ID',
        dataIndex: 'ID',
        width: '10%',
        ellipsis: true,
        //scopedSlots: { customRender: 'ID' },
      },
      {
        title: '用户',
        sorter: false,
        sortField: 'user',
        dataIndex: 'user',
        width: 1 / 15,
        ellipsis: true,
      },
      {
        title: '进程ID',
        sorter: false,
        sortField: 'pid',
        dataIndex: 'pid',
        width: 1 / 15,
        ellipsis: true,
      },
      {
        title: 'CPU占比',
        sorter: false,
        sortField: '',
        dataIndex: 'cpu',
        width: 1 / 15,
      },
      {
        title: '使用内存大小(KB)',
        sorter: false,
        sortField: 'vsz',
        dataIndex: 'vsz',
        width: 1 / 15,
        ellipsis: true,
      },
      // {
      //   title: '固定内存(KB)',
      //   sorter: false,
      //   sortField: 'rss',
      //   dataIndex: 'rss',
      //   width: 1 / 15,
      //   ellipsis: true,
      // },
      // {
      //   title: 'TTY',
      // sorter: false,
      // sortField: '',//   
      // dataIndex: 'tty',
      //   width: 1 / 15,
      // },
      {
        title: '状态',
        sorter: false,
        sortField: 'stat',
        dataIndex: 'stat',
        width: 1 / 15,
        ellipsis: true,
      },
  
      // {
      //   title: '命令',
      //   sorter: false,
      //   sortField: 'command',
      //   dataIndex: 'command',
      //   width: 1 / 15,
      //   ellipsis: true,
      // },
      // {
      //   title: '开始取证时间',
      //   sorter: (a, b) => {
      //     let aTime = new Date(a.start_time).getTime()
      //     let bTime = new Date(b.start_time).getTime()
      //     return aTime - bTime
      //   },
      //   sortField: 'start_time',
      //   sortDirections: ['descend', 'ascend', 'descend'],
      //   // 配置默认是倒序
      //   defaultSortOrder: 'descend',
      //   dataIndex: 'start_time',
      //   width: 1 / 15,
      //   ellipsis: true,
      // },
      // {
      //   title: '结束取证时间',
      // sorter: false,
      // sortField: '',//   
      // dataIndex: 'last_time',
      //   width: 1 / 15,
      //   ellipsis: true,
      // },
      // {
      //   title: '取证用户',
      //   sorter: false,
      //   sortField: 'forensices_user',
      //   dataIndex: 'forensices_user',
      //   width: 1 / 15,
      //   ellipsis: true,
      // },
      // {
      //   title: '取证源证书',
      //   sorter: false,
      //   sortField: 'certificate_number',
      //   dataIndex: 'certificate_number',
      //   width: '10%',
      //   ellipsis: true,
      // },
      {
        title: '上链哈希值',
        sorter: false,
        sortField: 'hash',
        dataIndex: 'hash',
        width: '10%',
        ellipsis: true,
      },
      {
        title: '详情',
        sorter: false,
        sortField: '',
        dataIndex: '',
        key: 'detail',
        width: '8%',
        scopedSlots: { customRender: 'opration' }
      },
      // {
      //   title: '完整性验证',
      //   sorter: false,
      //   sortField: '',
      //   dataIndex: '',
      //   key: 'verification',
      //   width: '8%',
      //   scopedSlots: { customRender: 'verification' }
      // },
    ];
  
    const data = [];
    export default {
      data() {
        return {
          columns,
          data,
          datalt: data,
          isDrawerShow: false,
          currDrawerShowform: [],
          searchName: '',
          loading: false,
          queryLists: [],
          queryObj: {},
          ruleForm: {},
          rules: {
            inquerydata: [
              {
                required: true,
                min: 0,
                max: 30,
                message: "查询数据不能为空",
                trigger: "change",
              },
            ],
          },
          isspin: false,
          isresult: false,
          layout: {},
          editingKey: '',
          querydata: [],
        }
      },
      mounted() {
        this.getProcessForensicsData();
      },
      methods: {
        async getProcessForensicsData() {
          const resData = await axios({
            methods: 'get',
            url: '/apilog/queryTamper'
          }).then((res) => {
            res.data.result.forEach((item) => {
              item.last_time = parseTime(item.last_time);
              item.start_time = parseTime(item.start_time);
              item.certificate_number = getCertificateNumber(item.certificate_number);
            })
            console.log("res:", res);
            this.data = res.data.result
            this.datalt = this.data
            this.querydata = this.data
          });
        },
  
        //提交查询按钮
        submitForm() {
          console.log(this.querydata)
          if (this.ruleForm.inquerydata && this.ruleForm.inquerydata !== '') {
            this.datalt = this.querydata.filter(
              (p) => {
  
                return p['pid'] == this.ruleForm.inquerydata;
              }
            )
          } else {
            this.datalt = this.data
          }
        },
        getDetial(record, index) {
          console.log("record!!!:", record);
          this.currDrawerShowform = []
          for (let key in record) {
            let obj = {
              "title": '',
              "value": '',
            };
            obj.title = key;
            this.columns.forEach(item => {
              //console.log("item:", item)
              if (item.dataIndex === key) {
                //console.log("item.dataIndex", item.dataIndex)
                obj.title = item.title
              }
            })
            //obj.title = key;
            obj.value = record[key];
            this.currDrawerShowform.push(obj);
            this.isDrawerShow = true;
          }
        },
        verify(record, index) {
          console.log("record!!!:", record);
          this.currDrawerShowform = []
          for (let key in record) {
            let obj = {
              "title": '',
              "value": '',
            };
            obj.title = key;
            this.columns.forEach(item => {
              //console.log("item:", item)
              if (item.dataIndex === key) {
                //console.log("item.dataIndex", item.dataIndex)
                obj.title = item.title
              }
            })
            //obj.title = key;
            obj.value = record[key];
            this.currDrawerShowform.push(obj);
            this.isDrawerShow = false;
          }
          console.log(this.currDrawerShowform);
          var transit = {
            "ID": this.currDrawerShowform[11].value,
            "hash": this.currDrawerShowform[18].value
          };
          // var ID = this.currDrawerShowform[5].value;
          this.$router.push({ path: '/tree', query: { transit: transit } });
        },
        /* 修改table样式 */
        customHeaderRow(column) {
          column.forEach((item, index) => {
            column[index].className = 'customHeaderRowClass'
          })
        },
        customRow(record) {
          return {
            style: {
              'color': '#91D5FF'
            }
          }
        },
      }
    }
  </script>
  <style scoped>
    .mains {
      width: 100%;
      height: 180px;
      /* 块级元素居中 */
      margin: 0 auto;
      padding: 20px;
      border: 2px solid #e6f7ff;
      border-radius: 10px;
      background-color: #fafafa;
    }
  
    .clearfloat {
      clear: both;
      height: 0;
    }
  
    .querybutton {
      float: right;
    }
  
    .dongtaicss {
      background-color: #abee;
    }
  
    .dongtaicss_change {
      background-color: #eea;
    }
  
    .div-info-detail {
      margin: 27px 0 0 0;
    }
  
    /* result */
    .res-peripheral {
      /* 绝对定位s1 */
      /* height: 580px; */
      position: relative;
      /* border:1px solid sienna; */
      background-color: #F8FCFF;
      border-radius: 5px;
      /*四周都有阴影 0px 0px  8px 0px */
      /*靠右靠下有阴影 5px 2px 6px */
      box-shadow: 2px 2px 3px #d0d0d0;
    }
  
    .res-endogenous {
      /* 绝对定位s2 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      /* 绝对定位over */
      width: 580px;
      /* height: 560px; */
      border-radius: 20px;
    }
  
    .info-detail-label {
      display: inline-block;
      font-size: 16px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #3f5ecf;
      line-height: 26px;
      text-shadow: 0px 2px 4px rgb(192 192 192 / 50%);
    }
  
    .info-detail-value {
      display: inline-block;
      width: 65%;
      vertical-align: top;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
      line-height: 26px;
      /* 自动换行 */
      word-break: break-all;
    }
  
    .spin-large {
      textAlign: center;
      /* background: rgba(0, 0, 0, 0.05); */
      border-radius: 4px;
      margin-bottom: 20px;
      padding: 30px 50px;
      margin: 20px 0;
    }
  
    .editable-row-operations a {
      margin-right: 8px;
    }
  
    /deep/.customHeaderRowClass {
      background-color: #1890FF !important;
      color: #fff !important;
    }
  </style>